<script setup>
import { defineComponent, ref } from "vue";
import Avatar from "./Avatar.vue";
import { useRouter } from "vue-router";
import { jumpper } from "../apis/jump";
import { login_out } from "../apis/logout";
const components = defineComponent(Avatar);
const router = useRouter();
const jump = () => {
  jumpper().then((res) => {
    console.log(res);
    if (res.code === 2001) {
      router.push("/mine");
    }
  });
};
const logout = () => {
  login_out().then((res) => {
    if (res?.code === 2000) {
      router.push("/index");
    }
  });
};
</script>

<template>
  <div class="topdiv">
    <div class="logoname">曦雨</div>
    <div class="menu">
      <router-link to="/login" class="link">登录</router-link>
      <router-link to="/index" class="link">首页</router-link>
      <div class="link" @click="jump()">我的</div>
      <div class="avatar"><Avatar /></div>
      <div class="link" @click="logout()">退出</div>
    </div>
  </div>
</template>

<style scoped>
.menu {
  display: flex;
  height: var(--frame-header-height);
  width: 100%;
  line-height: var(--frame-header-height);
  position: fixed;
  left: 80%;
}

.link {
  text-decoration: none;
  color: rgb(255, 255, 255);
  padding: 0 10px;
}
.logoname {
  font-size: 30px;
  font-weight: 900;
  position: fixed;
  left: 30px;
  line-height: var(--frame-header-height);
  background-image: -webkit-linear-gradient(
    left,
    blue,
    #66ffff 10%,
    #cc00ff 20%,
    #cc00cc 30%,
    #ccccff 40%,
    #00ffff 50%,
    #ccccff 60%,
    #cc00cc 70%,
    #cc00ff 80%,
    #66ffff 90%,
    blue 100%
  );
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 200% 100%;
  animation: masked-animation 4s linear infinite;
}
@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.topdiv {
  width: 100%;
  height: var(--frame-header-height);
  background-color: rgb(42, 42, 42);
  top: 0;
  left: 0;
  font-size: 20px;
  position: fixed;
}
.link:hover {
  filter: drop-shadow(0 0 2em #141414aa);
  background-color: rgba(169, 169, 169, 0.8);
}
.avatar {
  width: 60px;
  height: 60px;
}
.avatar:hover {
  filter: drop-shadow(0 0 2em #141414aa);
  background-color: rgba(169, 169, 169, 0.8);
}
</style>
